<template>
    <view class="order-page">
        <view class="order-content">
            <image src="http://www.jzcqedu.com:8080/userfiles/front/file/1586427014751.jpg" class="img"></image>
            <view class="data">
                <span class="name">课程标题</span>
                <span class="shi">课时:5课时</span>
                <span class="price">￥99</span>
            </view>
        </view>
        <view class="course-ind">
            <span class="name">课程介绍</span>
            <p class="content">
                6月11日0时至7月22日24时，累计报告本地确诊病例335例，在院79例，治愈出院256例。尚在观察的无症状感染者8例；无新增报告境外输入新冠肺炎确诊病例、疑似病例和无症状感染者。
            </p>
            <span class="name" style="margin-top:40rpx">支付方式</span>
            <view class="radio-box" >
                <radio-group @change="radioChange" >
                    <view class="main-data">
                        <span class="item" v-for="(item1, index1) in list" :key="index1">
                            <radio :value="item1.name" :checked="item1.answer === item1.name" color="#1783dd" style="transform: scale(0.9)"/>
                            <span class="iconfont" :class="item1.icon"></span>
                        </span>
                    </view>     
                </radio-group>
            </view>
        </view>
        <view class="pay" >
            <span class="price" >结算：￥99元</span>
            <span class="text1" @tap="back">取消订单</span>
            <span class="text" @tap="goPay">提交订单</span>
        </view>
    </view>
</template>

<script>
    import nodata from '@/components/nodata.vue'
    export default {
        components: {nodata},
        data() {
            return {
                placeholder:'\ue60c 输入内容',
                list:[
                    {name:'1',url:'',answer:'',icon:'iconzhifubaozhifu '},
                    {name:'2',url:'',answer:'',icon:'iconweixinzhifu'},
                ],
                active:0,
                show:false,
            }
        },
        onLoad() {

        },
        methods: {
            radioChange(){

            },
            goPage(){

            },
            closeOrder(){

            },
            goPay(){

            },
            back(){
                uni.navigateBack({
                    delta: 1
                });
            },
            search(){

            },
            change(item){
                this.current = item.detail.current;
            },
            goSelect(){
                console.log(222)
            },
            select(index){
                this.list.forEach((item,i)=>{
                    if(i==index){
                        item.addClass = "active"
                    }
                    else{
                        item.addClass = ""
                    }
                })
            },
            select1(index){
                this.active = index;
                this.list1.forEach((item,i)=>{
                    if(i==index){
                        item.addClass = "active"
                    }
                    else{
                        item.addClass = ""
                    }
                })
            }
        }
    }
</script>

<style lang="less">
    .order-page{
        width:100%;
        height:100%;
        float:left;
        background:#f4f4f4;
        .pay{
            width:100%;
            height:95upx;
            background:#ffffff;
            box-shadow:0 0 12upx #d8d8d8;
            position:absolute;
            left:0;
            bottom:0;
            .price{
                width:calc(50% - 20upx);
                display:block;
                float:left;
                line-height:95upx;
                padding-left:20upx;
                font-size:28upx;
                color:#f15a25;
            }
            .text{
                width:25%;
                display:block;
                float:left;
                line-height:95upx;
                text-align:center;
                font-size:30upx;
                background:#ff9800;
                color:#ffffff;
            }
            .text1{
                width:25%;
                display:block;
                float:left;
                line-height:95upx;
                text-align:center;
                font-size:30upx;
                background:#666666;
                color:#ffffff;
            }
        }
        .course-ind{
            width:100%;
            margin-top:20rpx;
            box-sizing:border-box;
            padding:20rpx 30rpx;
            background:#ffffff;
            .radio-box{
                width:100%;
                margin:40rpx 0;
                margin-bottom:0rpx;
                .main-textarea{
                    width:calc(100% - 40rpx);
                    line-height:40rpx;
                    display:flex;
                    min-height:120rpx;
                    background:#f5f5f5;
                    font-size:28rpx;
                    color:#888888;
                    padding: 20rpx;
                    margin-bottom:20rpx;
                }
                .main-data{
                    width:100%;
                    display:flex;
                    flex-wrap:wrap;
                    .item{
                        margin-right:30rpx;
                        display:flex;
                        align-items:center;
                        margin-bottom:30rpx;
                        .text{
                            font-size:30rpx;
                            color:#666666;
                            margin-left:10rpx;
                        }
                        .iconfont{
                            font-size:60rpx;
                            
                        }
                        .iconzhifubaozhifu{
                            color:#25abee;
                        }
                        .iconweixinzhifu{
                            color:#00ac1c;
                            font-size:66rpx;
                        }
                    }
                }
                .uni-list-cell{
                    width:auto;
                }
            }
            .buy{
                position:fixed;
                width:690rpx;
                bottom:20rpx;
                height:70rpx;
                line-height:70rpx;
                text-align:center;
                left:30rpx;
                border-radius:6rpx;
                background:#1783dd;
                font-size:32rpx;
                color:#ffffff;
            }
            .name{
                display:block;
                width:100%;
                line-height:50rpx;
                font-size:34rpx;
                color:#444444;
                font-weight:500;
            }
            .content{
                width:100%;
                margin-top:10rpx;
                font-size:28rpx;
                color:#666666;
                line-height:40rpx;
            }
        }
        .order-content{
            width:690rpx;
            margin:30rpx auto;
            box-sizing:border-box;
            padding:30rpx 40rpx;
            border-radius:10rpx;
            background:#ffffff;
            display:flex;
            justify-content:space-between;
            .img{
                width:320rpx;
                height:200rpx;
            }
            .data{
                width:calc(100% - 340rpx);
                .name{
                    line-height:40rpx;
                    margin-top:10rpx;
                    font-size:32rpx;
                    color:#444444;
                    display:block;
                    width:100%;
                }
                .shi{
                    line-height:40rpx;
                    margin-top:10rpx;
                    font-size:28rpx;
                    color:#666666;
                    display:block;
                    width:100%; 
                }
                .price{
                    line-height:50rpx;
                    margin-top:40rpx;
                    font-size:46rpx;
                    color:#ff9800;
                    display:block;
                    width:100%;
                }
            }
        }
    }
</style>
